import React, { useEffect, memo, useState } from 'react';
import { Link } from 'umi';
import classnames from 'classnames';
import { Layout, Menu, Upload } from 'antd';
import styles from './BasicLayout.less';
import IconFont from '@/components/IconFont';
import useModel from '../pages/DeviceType/useModel.js';
import Connect from '@/components/Connect';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';

import {
  RedoOutlined,
  RightOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

// export default memo(BasicLayout);

const SiderLayout = Connect(state => {
  return {
    currentDeviceType: state.currentDeviceType,
    queryLogoProps: state.queryLogoProps,
    imageUrl: state.imageUrl,
    logoUploadProps: state.logoUploadProps,
  };
}, useModel)(props => {
  const { location, logoUploadProps, imageUrl, queryLogoProps, currentDeviceType } = props;
  const num = location.pathname.indexOf('/');
  let currentKey = location.pathname.substring(num + 1);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    queryLogoProps.run();
  }, []);
  //为空时指定跳转deviceType页面
  if (!currentKey) {
    currentKey = 'deviceType';
  }

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div className="ant-upload-text">logo上传</div>
    </div>
  );
  const beforeUpload = async file => {
    setLoading(true);
    let formData = new FormData();
    formData.append('file', file);
    let res = await logoUploadProps.run(formData);
    setLoading(false);
    if (res && res.result) {
      queryLogoProps.run();
    }

    return false;
  };

  const filterOpenKeys = ['editorflow', 'dictionaryTable', 'messageTemplate', 'deviceType'];

  return (
    <Sider
      breakpoint="lg"
      className={styles['sider-wrap']}
      collapsedWidth="0"
      width={208}
      onBreakpoint={broken => {
        console.log(broken);
      }}
      onCollapse={(collapsed, type) => {
        console.log(collapsed, type);
      }}
    >
      <div className={styles['logo-wrap']}>
        <Upload
          accept={'image/gif,image/jpeg,image/png'}
          name="file"
          listType="picture-card"
          className={!imageUrl && styles['logo']}
          showUploadList={false}
          beforeUpload={beforeUpload}
        >
          {imageUrl ? <img src={imageUrl} alt="logo" /> : uploadButton}
        </Upload>
      </div>
      <Menu theme="dark" mode="inline" defaultOpenKeys={['sub1']} selectedKeys={[currentKey]}>
        <SubMenu
          key="sub1"
          className={classnames(styles['current-device-type'])}
          title={
            <Link to={'/deviceType'}>
              <span className={styles['nav-text']}>
                <span className={styles['nav-text']}>
                  {currentDeviceType == null ? '请选择设备类型' : currentDeviceType.name}
                </span>
              </span>
              {/* <RightOutlined className={styles['arrow-right']} /> */}
            </Link>
          }
        >
          <Menu.Item key="deviceType">
            <Link to={'/deviceType'}>
              <span className={styles['nav-text']}>
                <span className={styles['nav-text']}>平台选择</span>
              </span>
              {/* <RightOutlined className={styles['arrow-right']} /> */}
            </Link>
          </Menu.Item>
          <Menu.Item key="messageTemplate">
            <Link to={'/messageTemplate'}>
              <span className={styles['nav-text']}>报文模板管理</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="dictionaryTable">
            <Link to={'/dictionaryTable'}>
              <span className={styles['nav-text']}>字典表管理</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="editorflow">
            <Link to={'/editorflow'}>
              <span className={styles['nav-text']}>流程图</span>
            </Link>
          </Menu.Item>
        </SubMenu>
        <Menu.Item key="deviceTesting">
          <Link to={'/deviceTesting'}>
            <span className={styles['nav-text']}>设备测试</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="logs">
          <Link to={'/logs'}>
            <span className={styles['nav-text']}>日志管理</span>
          </Link>
        </Menu.Item>
      </Menu>
    </Sider>
  );
});
const BasicLayout = props => {
  const {
    dispatch,
    children,
    settings,
    location = {
      pathname: '/',
    },
  } = props;

  return (
    <Layout>
      <SiderLayout location={location} />
      <Layout>
        <Header className={styles['site-layout-sub-header-background']} style={{ padding: 0 }}>
          <div className={styles['left']}>
            <IconFont
              type={'iconshuaxin'}
              className={styles['refresh']}
              onClick={() => {
                window.location.reload([false]);
              }}
            />
          </div>
          <div className={styles['note']}>请规范命名报文模板名称避免混淆与使用错误</div>
        </Header>
        <Content className={styles['content-main']} id={'main-wrap'}>
          {children}
        </Content>
      </Layout>
    </Layout>
  );
};
export default BasicLayout;
